<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      align-items: end;
      gap: 10px;
    }

    .flex {
      display: flex;
    }

    .col {
      display: flex;
      flex-direction: column;
    }
  </style>
</head>

<body>
  <script>

    class Utils {
      static createDom (classList = []) {
        let dom = document.createElement("div");
        classList.forEach((item) => dom.classList.add(item))
        return dom
      }
      static append (son, par = document.body) {
        par.appendChild(son)
      }
    }
    class Mul extends Utils {
      constructor(num) {
        super();
        this.num = num;
        this.obj = {};
        this.init()
      }
      init () {
        for (let i = 1; i <= this.num; i++) {
          this.obj[i + ""] = []
          for (let j = i; j <= this.num; j++) {
            this.obj[i + ""].push([i, j])
          }
        }
        this.render()
      }
      render () {
        let container = Utils.createDom(["container", "flex"]);
        for (let item in this.obj) {
          let domArr = this.createList(this.obj[item]);
          let parDom = Utils.createDom(["col"]);
          domArr.forEach((item) => {
            Utils.append(item, parDom)
          })
          Utils.append(parDom, container);
        }
        Utils.append(container)
      }
      createList (item) {
        let domArr = item.map((item) => {
          let dom = Utils.createDom();
          dom.innerHTML = item[0] + "*" + item[1] + "=" + item[0] * item[1];
          return dom
        })
        return domArr
      }
    }
    let mul = new Mul(9);


  </script>
</body>

</html>